<template>
	<view class="single-pump">
		<view class="top">
			<!-- {{goodMsg}} -->
			<image class="good" :src="$util.img(goodMsg.goods_image)" mode="widthFix"></image>
			<view
				:class="['shop-text',{'max':goodMsg.level_id==1},{'special':goodMsg.level_id==2},{'hide':goodMsg.level_id==3},{'pt':goodMsg.level_id==4}]">
				<view class="shop-text-content">
					<view class="type">{{goodMsg.box_level}}</view>
					<view class="name">{{goodMsg.goods_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			openMagicBox: {
				type: Array
			}
		},
		computed: {
			goodMsg() {
				return this.openMagicBox[0];
			}
		},
	}
</script>

<style lang="scss" scoped>
	.single-pump {
		.top {
			width: 100%;
			height: 874rpx;
			background: url(../../../../static/image/draw-result-bg2.png);
			background-size: 100% 100%;
			position: relative;

			.good {
				position: absolute;
				z-index: 10;
				bottom:282rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 365rpx;
				height: 365rpx;
			}

			.shop-text {
				width: 622rpx;
				height: 421rpx;

				position: absolute;
				bottom: -150rpx;

				&.pt {
					background-image: url(~@/static/image/draw-shop-bg-pt.png);
					background-size: 100% 100%;
				}

				&.max {
					background-image: url(~@/static/image/draw-shop-bg-max.png);
					background-size: 100% 100%;
				}

				&.special {
					background-image: url(~@/static/image/draw-shop-bg-special.png);
					background-size: 100% 100%;
				}

				&.hide {
					background-image: url(~@/static/image/draw-shop-bg-hide.png);
					background-size: 100% 100%;
				}

				.shop-text-content {
					position: relative;
					width: 100%;
					height: 100%;

					.type {
						font-size: 44rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
						position: absolute;
						top: 85rpx;
						right: 182rpx;
					}

					.name {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.8);
						position: absolute;
						top: 151rpx;
						right: 135rpx;
						width: 189rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						display:-webkit-box;  //弹性盒模型
						-webkit-box-orient:vertical;  //上下垂直
						-webkit-line-clamp:2;  //自定义行数
					}
				}
			}
		}

	}
</style>
